import React, { useEffect, useState } from 'react';
import { Breadcrumb, ConfigProvider, message, Pagination, Radio } from 'antd';
import styles from './index.less';
import {
  declarationList,
  declarationStatus,
  competentDepartment,
  declarationMethod,
  eye,
  declare,
  noStarted,
  share,
  underDeclaration,
  noStatistics,
  ended,
  noShare,
  stateMethod,
} from '@/utils/policyListUtil';
import Search from 'antd/es/input/Search';
import {
  findPolicyInfoMatterByQueryCondition,
  findPolicyOrgsByOrgType,
  getMatterStatistics,
} from '@/services/policyList';
import zhCN from 'antd/lib/locale/zh_CN';
import { getIsLogin, highLight } from '@/utils/util';
import { history } from '@@/core/history';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { connect } from 'umi';
interface ArticlesData {
  value: number;
  name: string;
  id: string;
}

const PolicyList: React.FC = (props) => {
  const { dispatch }: any = props;
  const [declarationMethodTitle, setDeclarationMethodTitle] = React.useState('');
  const [declarationObject, setDeclarationObject] = React.useState('');
  const [matterStatus, setMatterStatus] = React.useState('');
  const [orgId, setOrgId] = React.useState<number>('');
  const [statistics, setStatistics] = useState({});
  const [title, setTitle] = useState('');
  const [page, setPage] = useState<number>(1);
  const [pageSize, setPageSize] = useState<number>(12);
  const [totalLength, setTotalLength] = useState(0);
  const [policyInfoMatter, setPolicyInfoMatter] = useState([]);
  const [department, setDepartment] = useState([]);
  const handleDeclarationMethodChange = (e: any) => {
    setDeclarationMethodTitle(e.target.value);
  };
  const handleDeclarationObjectChange = (e: any) => {
    setDeclarationObject(e.target.value);
  };
  const handleMatterStatusChange = (e: any) => {
    setMatterStatus(e.target.value);
  };
  const handleOrgIdChange = (e: any) => {
    setOrgId(e.target.value);
  };

  const pageOnchange = (page: number, pageSize: number) => {
    setPage(page);
    setPageSize(pageSize);
  };
  const searchOnChange = (value: any) => {
    setTitle(value);
  };
  const declareOnclick = (id: number, matterStatus: any) => {
    if (matterStatus === '01') {
      message.warning('未开始申报');
      return;
    }
    if (matterStatus === '03') {
      message.warning('已结束申报');
      return;
    }
    if (!getIsLogin()) {
      message.error('请先登录');
      history.push({ pathname: '/' });
      highLight(dispatch, 'home');
      return;
    }
    history.push({ pathname: '/onlineApply', query: { id: id } });
  };
  const JumpHref = (id: string) => {
    if (id) {
      history.push({ pathname: '/PolicyDeclare', query: { id: id } });
    }
  };

  useEffect(() => {
    getMatterStatistics({}).then((res) => {
      setStatistics(res.results);
    });
    findPolicyOrgsByOrgType({ orgType: 'CompetentAuthority' }).then((res) => {
      setDepartment(res.results);
    });
  }, []);
  useEffect(() => {
    findPolicyInfoMatterByQueryCondition({
      page: page,
      size: pageSize,
      declarationMethod: declarationMethodTitle, //方式
      declarationObject: declarationObject, //对象
      matterStatus: matterStatus, //状态
      orgId: orgId, //部门
      title: title,
    }).then((res) => {
      setPolicyInfoMatter(res.results);
      setTotalLength(res.totalCount);
    });
  }, [page, pageSize, title, declarationMethodTitle, declarationObject, matterStatus, orgId]);
  const articlesData = [
    {
      value: statistics.onlineMatterCount,
      name: '政策总数(条)',
      id: '1',
    },
    {
      value: statistics.declaringMatterCount,
      name: '申报中政策数量(条)',
      id: '2',
    },
    {
      value: statistics.totalAccessCount,
      name: '总访问量(人)',
      id: '3',
    },
    {
      value: statistics.declaredQuantity,
      name: '申报数量(条)',
      id: '4',
    },
  ];
  const copeClick = () => {
    message.success('复制成功');
  };
  //获取当前域名+端口号
  const host = location.host;
  return (
    <div style={{ background: '#fff' }}>
      <div className={styles.contentMiddle}>
        {/* 面包屑 */}
        <div className={styles.economicZoneBreadcrumb}>
          <Breadcrumb separator="">
            <Breadcrumb.Item>您的位置</Breadcrumb.Item>
            <Breadcrumb.Separator>:</Breadcrumb.Separator>
            <Breadcrumb.Item href="">首页</Breadcrumb.Item>
            <Breadcrumb.Separator />
            <Breadcrumb.Item>政策申报</Breadcrumb.Item>
          </Breadcrumb>
        </div>
        {/*筛选*/}
        <div className={styles.ScreenSee}>
          <div className={styles.oneText}>
            <div className={styles.Treatment}>申报对象：</div>
            <div className={styles.condition}>
              <Radio.Group value={declarationObject} onChange={handleDeclarationObjectChange}>
                {declarationList?.map((item) => {
                  return (
                    <Radio.Button key={item.key} value={item.value}>
                      {item.title}
                    </Radio.Button>
                  );
                })}
              </Radio.Group>
            </div>
          </div>
          <div className={styles.oneText}>
            <div className={styles.Treatment}>申报状态：</div>
            <div className={styles.condition}>
              <Radio.Group value={matterStatus} onChange={handleMatterStatusChange}>
                {declarationStatus?.map((item) => {
                  return (
                    <Radio.Button key={item.key} value={item.value}>
                      {item.title}
                    </Radio.Button>
                  );
                })}
              </Radio.Group>
            </div>
          </div>
          <div className={styles.oneText}>
            <div className={styles.Treatment}>主管部门：</div>
            <div className={styles.condition}>
              <Radio.Group value={orgId} onChange={handleOrgIdChange}>
                <Radio.Button value="">不限</Radio.Button>
                {department?.map((item) => {
                  return (
                    <Radio.Button key={item.id} value={item.id}>
                      {item.orgName}
                    </Radio.Button>
                  );
                })}
              </Radio.Group>
            </div>
          </div>
          <div className={styles.oneText}>
            <div className={styles.Treatment}>申报方式：</div>
            <div className={styles.condition}>
              <Radio.Group value={declarationMethodTitle} onChange={handleDeclarationMethodChange}>
                {declarationMethod?.map((item) => {
                  return (
                    <Radio.Button key={item.key} value={item.value}>
                      {item.title}
                    </Radio.Button>
                  );
                })}
              </Radio.Group>
            </div>
          </div>
        </div>
        {/*数据统计*/}
        <div className={styles.statisticsData}>
          <div className={styles.statisticsTile}>
            <div className={styles.statisticsLine}></div>
            <div style={{ marginLeft: 15 }}>政府数据统计</div>
          </div>
          <div className={styles.classification}>
            {articlesData?.map((item) => {
              return (
                <div className={styles.articlesData} key={item.id}>
                  <div className={styles.articlesNum}>{item.value}</div>
                  <div className={styles.articlesLine}></div>
                  <div className={styles.articlesTitle}>{item.name}</div>
                </div>
              );
            })}
          </div>
        </div>
        {/*申报列表*/}
        <div className={styles.statisticsData} style={{ marginBottom: '10%' }}>
          <div
            className={styles.statisticsTile}
            style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 15 }}
          >
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <div className={styles.statisticsLine}></div>
              <div style={{ marginLeft: 15 }}>政策申报</div>
            </div>
            <div className={styles.searchInput}>
              <Search placeholder="请输入搜索内容" enterButton onSearch={searchOnChange} />
            </div>
          </div>
          <div className={styles.declarationPolicy}>
            {policyInfoMatter?.map((item) => {
              return (
                <div className={styles.declarationPolicyItem}>
                  <div
                    className={styles.declarationPolicyTitle}
                    style={{
                      background: stateMethod(item?.matterStatus)[1],
                    }}
                  >
                    <span>{item.orgName}</span>
                    <img src={stateMethod(item?.matterStatus)[0]} />
                  </div>
                  <div
                    className={styles.declarationPolicyContent}
                    onClick={JumpHref.bind('', item.id)}
                  >
                    {item.title}
                  </div>
                  <div className={styles.declarationPolicyAction}>
                    <div style={{ width: '45%', display: 'flex' }}>
                      <CopyToClipboard
                        text={`${host}#/PolicyDeclare?id=${item.id}`} // 需要复制的文本
                        onCopy={copeClick.bind('')} // 复制完成的回调
                      >
                        <img src={item?.matterStatus === '03' ? noShare : share} width="100%" />
                      </CopyToClipboard>
                    </div>

                    <img
                      src={item?.matterStatus === '03' ? noStatistics : declare}
                      width="45%"
                      onClick={declareOnclick.bind('', item?.id, item?.matterStatus)}
                    />
                  </div>
                  <div className={styles.declarationPolicyEye}>
                    <img src={eye} width="6%" />
                    <span>{item.accessCount}</span>
                  </div>
                </div>
              );
            })}
          </div>
          <div className={styles.paging}>
            <ConfigProvider locale={zhCN}>
              <Pagination
                total={totalLength}
                showSizeChanger
                current={page}
                defaultPageSize={12}
                pageSizeOptions={['12', '24', '36', '48']}
                showTotal={(total) => `共 ${total} 条数据`}
                onChange={pageOnchange}
              />
            </ConfigProvider>
          </div>
        </div>
      </div>
    </div>
  );
};
export default connect(({ current }: any) => ({
  CurrentState: current.CurrentState,
}))(PolicyList);
